<template>
  <div class="console-charging">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="充值明细" name="1">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="5">
              <el-select v-model="form.type" placeholder="全部交易类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-input v-model="form.relChargingTotal" placeholder="请输入交易金额"></el-input>
            </el-col>
            <el-col :span="5">
              <el-input v-model="form.balance" placeholder="请输入余额"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="query">搜索</el-button>
            </el-col>
          </el-row>
          <el-table :data="pageInfo.records" :header-cell-style="{'background-color': '#eef1ff','color': '#2c2c2c','border-radius': '10px'}" style="width: 100%">
            <el-table-column prop="ct" label="交易时间" #default="scope">
              {{ fmtDate(scope.row.ct) }}
            </el-table-column>
            <el-table-column label="交易类型">
              <template #default="scope">
                <el-tag>
                  <div v-if="scope.row.type == 1">充值</div>
                  <div v-else>提现</div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="rechargeAmount" label="交易金额">
              <template slot-scope="scope">
                <div>{{ scope.row.rechargeAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="账户余额"/>
            <el-table-column prop="date" label="备注"/>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="扣款明细" name="2">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input v-model="form.relChargingTotal" placeholder="请输入交易金额"></el-input>
            </el-col>
            <el-col :span="5">
              <el-input v-model="form.balance" placeholder="请输入余额"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="query">搜索</el-button>
            </el-col>
          </el-row>
          <el-table :header-cell-style="{'background-color': '#eef1ff','color': '#2c2c2c','border-radius': '10px'}" :data="pageInfo.records" style="width: 100%">
            <el-table-column prop="ct" label="交易时间" #default="scope">
              {{ fmtDate(scope.row.ct) }}
            </el-table-column>
            <el-table-column label="交易类型">
              <template #default="scope">
                <el-tag>
                  {{ scope.row.dataType}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="实例名称" />
            <el-table-column prop="rechargeAmount" label="交易金额">
              <template slot-scope="scope">
                <div>{{ scope.row.relChargingTotal }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="账户余额"/>
            <el-table-column prop="date" label="备注"/>
          </el-table>
        </el-tab-pane>
          <div class="pagenation">
            <el-pagination :current-page="pageInfo.current" :page-sizes="[10, 20, 30, 50]" :page-size="pageInfo.size"
              layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from 'dayjs'

export default {
  name: 'Charging',
  data() {
    return {
      tableData: [],
      activeName: '1',
      value1:'',
      value:'',
      options:[
        {
          label: '充值',
          value: 1
        }, {
          label: '提现',
          value: 2
        }
      ],
      form: {},
      pageInfo: {
        size: 10,
        current: 1,
        orderColumn: 'ct',
        order: 'DESC',
        param: {
          relChargingTotal: ''
        }
      },
      comp: []
    }
  },
  mounted() {
    
    this.getSelection ()
    this.query()
  },
  methods: {
    getSelection () {
      request.get('/xsy-service-web/ChargingType/list').then(res => {
        this.comp = res.data
        console.log('下拉框数据',res)
      })
    },
    fmtDate(t){
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    },
    query() {
      console.log(this.activeName)
      if (this.activeName == 1) {
        delete this.pageInfo.records
        this.pageInfo.param = this.form
        if (this.value1) {
          this.pageInfo.param.ctStart = this.value1[0].getTime()
          this.pageInfo.param.ctEnd = this.value1[1].getTime()
        }
        request.post('/xsy-service-web/WebRechargeRecord/page', this.pageInfo).then(res => {
          this.pageInfo = res.data
        })
      } else {
        delete this.pageInfo.records
        this.pageInfo.param = this.form
        request.post('/xsy-service-web/WebInstanceChargingRecord/page', this.pageInfo).then(res => {
          this.pageInfo = res.data
          this.pageInfo.records.map(item => {
            if (item.type == 5) {
              item.dataType = '数据盘扩容'
            }
            this.comp.map(i => {
              if (item.type == i.code) {
                item.dataType = i.name
              }
            })
          })
        })
      }
    },
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.query()
    },
    handleCurrentChange (val) {
      this.pageInfo.current = val
      this.query()
    },
    handleClick(tab, event) {
      console.log(tab, event)
      this.activeName == tab.name
      this.query()
    }
  }
}
</script>

<style lang="scss" scoped>
.pagenation {
    text-align: center;
    padding: 20px;
  }
</style>
